<template>
    <div>
        <input
         v-if="isEdit"
         v-focus
         :value="value"
         @blur="isEdit = false"
         @keyup.enter="handleEnter"
         placeholder="请输入标签">
         <!-- 定义双击事件 -->
        <p v-else @dblclick="handleEdit">{{value}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isEdit: false
        }
    },
    methods:{
        handleEdit(){
            this.isEdit = true
        },
        handleEnter(e){
            this.$emit('input',e.target.value)
            this.isEdit = false
        }
    },
    props:{
        value:String
    }
}
</script>

<style>
    input,p{
        width: 100px;
    }
</style>